<template>
  <div class="role-manage">
    <el-table
      :data="data"
      :show-header="false"
      ref="multipleTable"
      @row-click="selectRole"
      border
      id="sort"
      highlight-current-row
    >
      <el-table-column label="名称">
        <template slot-scope="scope">
          <div class="role">
            <div class="role-name">
              <el-input
                v-model="inputValue"
                v-if="scope.row.isEdit"
                size="small"
                v-focus
                @blur="inputConfirm(scope.row)"
              ></el-input>
              <span v-if="!scope.row.isEdit">{{ scope.row.label }}</span>
            </div>
            <div>
              <i class="el-icon-edit" @click.stop="edit(scope.row)"></i>
              <i
                class="el-icon-delete  margin-right20 margin-left20"
                @click.stop="deleteHandle(scope.row)"
              ></i>
              <i
                class="el-icon-copy-document"
                @click.stop="copyHandle(scope.row)"
                v-if="isCopyBtn"
              ></i>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { tableUpdate } from '@/api/api'
import { copyPermissions } from '@/api/user'
export default {
  data () {
    return {
      inputValue: ''
    }
  },
  props: {
    data: Array,
    isCopyBtn: Boolean
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.$refs.multipleTable.setCurrentRow(this.$refs.multipleTable.data[0])
      })
    },
    async inputConfirm (item, id) {
      if (!this.inputValue) {
        this.$message.error('请输入角色名称')
        return false
      }
      if (this.inputValue.length > 16) {
        this.$message.error('只能输入16个字符')
        return false
      }
      let res = await tableUpdate([
        {
          table_name: 'nice_role',
          update: [
            {
              role_name: this.inputValue
            }
          ],
          where: [
            {
              id: item.value
            }
          ]
        }
      ])
      if (res[0]) {
        return
      }
      if (res[1] && res[1].code === 0) {
        this.refreshData()
      } else {
        this.$message.error(res[1].msg)
      }
    },
    edit (item) {
      this.inputValue = item.label
      this.$emit('editHandle', item)
    },
    selectRole (item) {
      this.$emit('refreshDataList', item.value)
    },
    deleteHandle (row) {
      this.$confirm('确定删除操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.removeRole(row)
        })
        .catch(() => {})
    },
    async removeRole (row) {
      let res = await tableUpdate([
        {
          table_name: 'nice_role',
          update: [{ enable: '1' }],
          where: [{ id: row.value }]
        },
        {
          table_name: 'nice_role',
          update: [{ enable: '1' }],
          where: [{ parent: row.value }]
        }
      ])
      if (res[0]) {
        return
      }
      if (res[1] && res[1].code === 0) {
        this.refreshData()
      } else {
        this.$message.error(res[1].msg)
      }
    },
    refreshData () {
      this.$emit('refreshDataList')
    },
    async copyHandle (item) {
      let res = await copyPermissions({
        'nice_role.role_name': item.label,
        'nice_role.parent': '1',
        'nice_role_permission.permission_id': item.value
      })
      if (res[0]) {
        return
      }
      if (res[1] && res[1].code === 0) {
        this.refreshData()
      } else {
        this.$message.error(res[1].msg)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.role-manage {
  height: 560px;
  overflow: auto;
  .role {
    display: flex;
    justify-content: space-between;
    .role-name {
      width: 60%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
